<template>
  <el-form ref="card-number-setting"
           :model="setting"
           label-position="top">
    <el-form-item label="Measure">
      <el-select v-model="setting.valueFieldsName"
                 style="width: 100%">
        <el-option v-for="item in fieldsList"
                   :label="item.name"
                   :value="item.name"
                   :key="item.value"></el-option>
      </el-select>

    </el-form-item>
    <el-form-item label="Value Font Weight">
      <el-select v-model="setting.valueFontWeight"
                 style="width: 100%">
        <el-option label="normal"
                   value="normal"></el-option>
        <el-option label="bold"
                   value="bold"></el-option>
        <el-option label="900"
                   value="900"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="Value Font Color">
      <el-color-picker size="small"
                       v-model="setting.valueFontColor"
                       color-format="hex"></el-color-picker>
    </el-form-item>

    <el-form-item label="Footer Title">
      <el-input v-model="setting.footerTitle"></el-input>
    </el-form-item>
    <el-form-item label="Footer Title Color">
      <el-color-picker size="small"
                       v-model="setting.footerTitleFontColor"
                       color-format="hex"></el-color-picker>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  name: 'CardNumberSetting',
  data () {
    return {
      setting: {
        "titleFontSize": "16px",
        "titleFontColor": "#000",
        "footerTitle": "",
        "footerTitleFontSize": "25px",
        "footerTitleFontColor": "#666",
        "valueFontSize": "100px",
        "valueFontColor": "#000000",
        "valueFontWeight": "normal",
        "IsCompare": false,
        "maximum": 110,
        "minimum": 10,
        "colorCheck": 6,
        "oneColor": "red",
        "twoColor": "blue",
        "threeColor": "green",
        "fourColor": "black",
        "fiveColor": "yellow",
        "maxColor": "#21C90B",
        "minColor": "#FF0000",
        "middleColor": "#E4F802",
        "valueFieldsName": "value",
      },

    }
  },
  props: {
    fieldsList: {
      type: Array,
      default: () => ([])
    },
    dataInfo: {
      type: Object,
      default: () => ({})
    }
  },


  methods: {
    getData () {
      return this.setting
    },
  }
}
</script>


